package app.delish.discover.ui
/*
 * Copyright 2021 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.Dimension
import app.delish.discover.R
import app.delish.compose.theme.DelishComposeTheme
import app.delish.compose.ui.AsyncImage
import app.delish.compose.view.BookMarkButton
import com.elbehiry.model.RecipesItem

/**
 * wenlong 首页的第一个rv item
 */
// 每日灵感项目卡片组件
@Composable
fun InspirationItem(
    recipe: RecipesItem,             // 食谱数据对象
    modifier: Modifier = Modifier,   // 可选布局修饰符
    onDetails: (Int) -> Unit,        // 查看详情回调（传入食谱ID）
    onBookMark: (RecipesItem) -> Unit // 收藏按钮回调（传入食谱对象）
) {
    // 本地状态管理收藏状态（初始值为recipe.saved）
    var select by remember { mutableStateOf(recipe.saved) }

    // 使用ConstraintLayout实现精确布局控制
    ConstraintLayout(
        modifier = Modifier
            .width(250.dp)           // 固定卡片宽度
            .padding(8.dp)           // 外间距
            .clickable { onDetails(recipe.id) }  // 整体点击查看详情
    ) {
        // 创建组件引用（ConstraintLayout约束关系）
        val (image, time, title, source) = createRefs()

        // 卡片表面容器（用于图片显示）
        Surface(
            modifier = modifier
                .fillMaxWidth()      // 占满卡片宽度
                .height(150.dp)      // 固定高度
                .constrainAs(image) {  // 约束设置
                    // 水平方向：左右贴紧父布局
                    linkTo(start = parent.start, end = parent.end)
                    // 宽度约束：占满可用空间
                    width = Dimension.fillToConstraints
                },
            color = MaterialTheme.colors.background,  // 使用主题背景色
            elevation = 8.dp,        // 阴影高度
            shape = RoundedCornerShape(8.dp)  // 圆角形状
        ) {
            // 图片容器
            Box(modifier = Modifier.fillMaxSize()) {
                // 异步加载食谱图片
                AsyncImage(
                    model = recipe.image ?: "",  // 图片URL（空字符串备用）
                    requestBuilder = { crossfade(true) },  // 启用淡入淡出效果
                    contentDescription = "Cuisine image",  // 无障碍描述
                    modifier = Modifier.fillMaxSize(),  // 占满父容器
                    contentScale = ContentScale.Crop  // 裁剪模式（保持比例）
                )

                // 收藏按钮组件（右上角）
                BookMarkButton(
                    modifier = Modifier
                        .align(Alignment.TopEnd)  // 右上角定位 todo 不同的控件，定位方式不同。
                        .padding(8.dp),           // 内边距
                    backgroundColor = colorResource(id = R.color.black_alpha),  // 半透明背景
                    onBookMark = {
                        // 更新本地状态
                        recipe.saved = !recipe.saved
                        select = !select
                        // 回调外部处理
                        onBookMark(recipe)
                    },
                    selected = select  // 当前收藏状态
                )
            }
        }

        // 烹饪时间文本
        Text(
            text = "${recipe.readyInMinutes ?: 0}MIN",  // 显示时间（空值处理）
            style = MaterialTheme.typography.subtitle2,  // 次级标题样式
            maxLines = 1,  // 单行显示
            textAlign = TextAlign.Start,  // 左对齐
            modifier = Modifier
                .padding(top = 4.dp)  // 顶部间距
                .fillMaxWidth()        // 占满宽度
                .constrainAs(time) {   // 约束设置
                    // 水平方向：左右贴紧
                    linkTo(start = parent.start, end = parent.end)
                    // 垂直方向：在图片底部与标题顶部之间
                    linkTo(top = image.bottom, bottom = title.top)
                }
        )

        // 食谱标题文本
        Text(
            text = recipe.title ?: "",  // 标题文本（空值处理）
            style = MaterialTheme.typography.subtitle1,  // 主标题样式
            maxLines = 1,  // 单行显示
            textAlign = TextAlign.Start,  // 左对齐
            overflow = TextOverflow.Ellipsis,  // 超出显示省略号
            modifier = Modifier
                .fillMaxWidth()  // 占满宽度
                .constrainAs(title) {  // 约束设置
                    // 水平方向：左右贴紧
                    linkTo(start = parent.start, end = parent.end)
                    // 垂直方向：在时间文本底部与来源顶部之间
                    linkTo(top = time.bottom, bottom = source.top)
                }
        )

        // 来源文本（作者/来源）
        Text(
            text = "by ${recipe.sourceName ?: ""}",  // 来源信息（空值处理）
            fontSize = 12.sp,         // 较小字号
            fontWeight = FontWeight.Light,  // 细体字重
            fontStyle = FontStyle.Normal,   // 正常字体样式
            maxLines = 1,              // 单行显示
            textAlign = TextAlign.Start,  // 左对齐
            modifier = Modifier
                .padding(top = 4.dp)    // 顶部间距
                .fillMaxWidth()          // 占满宽度
                .constrainAs(source) {   // 约束设置
                    // 水平方向：左右贴紧
                    linkTo(start = parent.start, end = parent.end)
                    // 垂直方向：在标题文本底部与父容器底部之间
                    linkTo(top = title.bottom, bottom = parent.bottom)
                }
        )
    }
}

@Preview
@Composable
fun PreviewInspirationItem() {
    DelishComposeTheme {
        InspirationItem(RecipesItem(id=-1), onDetails = {}) {}
    }
}
